import moduleImg from '@/assets/image/screenshot/module.png';

## Main Components#main-components

PageSpy is composed of the following three modules:

- Debugging Client: Corresponds to the [HuolalaTech/page-spy-web](https://github.com/HuolalaTech/page-spy-web) repository. Used by developers, it provides various debugging features, including online debugging and offline replay.
- SDK: Corresponds to the [HuolalaTech/page-spy](https://github.com/HuolalaTech/page-spy) repository. It collects runtime data from the client application and sends it to the server, which then forwards it to the debugging client.
- Server: Corresponds to the [HuolalaTech/page-spy-api](https://github.com/HuolalaTech/page-spy-api) repository. It relays messages between the two endpoints and stores data.

The interaction diagram between the three modules is as follows:

<a href={moduleImg} target="_blank">
  <img alt="System Module Diagram" src={moduleImg} />
</a>

## Multiple Deployment Options#deployments

For ease of use and data security, PageSpy provides multiple out-of-the-box **one-click deployment solutions**. You can choose the appropriate deployment method based on your actual situation.

- [Deploy with Node](./deploy-with-node)
- [Deploy with Docker](./deploy-with-docker)
- [Install on Baota](./deploy-with-baota)
